<template>
  <div class="">
    <div class="img">
      <img src="../../public/Snipaste_2023-03-08_14-08-40.png" alt="" />
      <p>随心写作,自由表达</p>
      <el-button type="primary" @click="begin">开始写文章</el-button>
      <p>发现精彩</p>
    </div>
    <div class="list1">
      <div class="lists" v-for="item in seety.seetylist" :key="item._id">
        <img :src="item.avatar.url" alt="" />
        <p>{{ item.description }}</p>
        <el-button
          type="primary"
          @click="$router.push({ path: '/column', query: { id: item._id } })"
          >进入专栏</el-button
        >
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
import { getess } from "../utils/api";
const seety = reactive({
  seetylist: [],
});
const data = reactive({
  size: 6,
  page: 1,
});
getess(data).then((res) => {
  console.log(res);
  seety.seetylist = res.data.data.list;
});
const begin=()=>{
if(localStorage.getItem("token")){
router.push("/write")
}else{
router.push("/")
}
}
</script>

<style lang="scss">
.img {
  margin: auto;
  padding: 20px;
  width: 200px;
  height: 200px;
}
.list1 {
  margin-top: 15px;
  width: 100%;
  height: 500px;
  justify-content: space-between;
  display: flex;
  flex-wrap: wrap;
}
.lists {
  width: 28%;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0px 0px 4px 2px #ccc;
  text-align: center;
  margin-top: 15px;
  img {
    width: 85px;
    border-radius: 50%;
  }
}
</style>
